<template>
  <div class="hospital-map">
    <div class="map-header">
      <h3>院内地图与导航</h3>
      <div class="controls">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索科室或位置"
          class="search-input"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button type="primary" @click="searchLocation">搜索</el-button>
      </div>
    </div>
    
    <div class="map-container">
      <div ref="mapElement" class="map-element"></div>
      
      <div class="navigation-panel" v-if="showNavigation">
        <div class="nav-header">
          <h4>导航到: {{ destination.name }}</h4>
          <el-button type="text" @click="closeNavigation">关闭</el-button>
        </div>
        
        <div class="route-info">
          <div class="distance">总距离: {{ routeInfo.distance }}</div>
          <div class="time">预计时间: {{ routeInfo.time }}</div>
        </div>
        
        <div class="turn-by-turn">
          <div 
            v-for="(step, index) in routeSteps" 
            :key="index"
            class="step"
            :class="{ active: currentStep === index }"
          >
            <div class="step-icon">{{ index + 1 }}</div>
            <div class="step-desc">{{ step.description }}</div>
          </div>
        </div>
        
        <el-button type="primary" @click="startNavigation">开始导航</el-button>
      </div>
    </div>
    
    <div class="location-list">
      <h4>科室列表</h4>
      <el-scrollbar height="300px">
        <div 
          v-for="location in filteredLocations" 
          :key="location.id"
          class="location-item"
          :class="{ active: selectedLocation?.id === location.id }"
          @click="selectLocation(location)"
        >
          <div class="location-icon">
            <el-icon><Location /></el-icon>
          </div>
          <div class="location-info">
            <div class="location-name">{{ location.name }}</div>
            <div class="location-floor">楼层: {{ location.floor }}</div>
          </div>
          <el-button 
            type="primary" 
            size="small" 
            @click.stop="navigateTo(location)"
          >
            导航
          </el-button>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick } from 'vue'
import { ElInput, ElButton, ElIcon, ElScrollbar } from 'element-plus'
import { Search, Location } from '@element-plus/icons-vue'

// 模拟地图API
const mapElement = ref(null)
const mapInstance = ref(null)

// 搜索相关
const searchKeyword = ref('')
const locations = ref([
  { id: 1, name: '心内科', floor: '3F', x: 120, y: 200 },
  { id: 2, name: '急诊科', floor: '1F', x: 80, y: 100 },
  { id: 3, name: '放射科', floor: '2F', x: 300, y: 150 },
  { id: 4, name: '检验科', floor: '1F', x: 200, y: 300 },
  { id: 5, name: '药房', floor: '1F', x: 400, y: 250 },
  { id: 6, name: '外科', floor: '4F', x: 150, y: 180 }
])

const filteredLocations = computed(() => {
  if (!searchKeyword.value) return locations.value
  return locations.value.filter(location => 
    location.name.includes(searchKeyword.value)
  )
})

// 导航相关
const showNavigation = ref(false)
const selectedLocation = ref(null)
const destination = ref(null)
const routeInfo = ref({ distance: '250米', time: '3分钟' })
const routeSteps = ref([
  { description: '向前直行50米' },
  { description: '在大厅处左转' },
  { description: '乘坐电梯到3楼' },
  { description: '出电梯后右转' },
  { description: '到达心内科' }
])
const currentStep = ref(0)

// 初始化地图
onMounted(() => {
  initMap()
})

const initMap = () => {
  // 模拟初始化地图
  if (mapElement.value) {
    mapElement.value.innerHTML = `
      <div class="mock-map">
        <div class="map-background">
          <div class="floor-label">1F</div>
          <div class="locations">
            ${locations.value.map(loc => `
              <div class="location-marker" style="left: ${loc.x}px; top: ${loc.y}px;">
                ${loc.name}
              </div>
            `).join('')}
          </div>
        </div>
      </div>
    `
  }
}

const searchLocation = () => {
  // 搜索逻辑
  console.log('搜索位置:', searchKeyword.value)
}

const selectLocation = (location) => {
  selectedLocation.value = location
  // 在地图上高亮显示选中位置
  console.log('选中位置:', location)
}

const navigateTo = (location) => {
  destination.value = location
  showNavigation.value = true
  // 规划路线逻辑
  console.log('导航到:', location)
}

const startNavigation = () => {
  // 开始导航逻辑
  console.log('开始导航')
}

const closeNavigation = () => {
  showNavigation.value = false
  destination.value = null
}
</script>

<style scoped>
.hospital-map {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #ebeef5;
}

.map-header h3 {
  margin: 0;
}

.controls {
  display: flex;
  gap: 12px;
}

.search-input {
  width: 300px;
}

.map-container {
  position: relative;
  flex: 1;
  display: flex;
}

.map-element {
  flex: 1;
  background-color: #f5f7fa;
  position: relative;
  overflow: hidden;
}

.mock-map {
  width: 100%;
  height: 100%;
  position: relative;
}

.map-background {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #e0e6ed 25%, transparent 25%), 
              linear-gradient(-45deg, #e0e6ed 25%, transparent 25%), 
              linear-gradient(45deg, transparent 75%, #e0e6ed 75%), 
              linear-gradient(-45deg, transparent 75%, #e0e6ed 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.floor-label {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #409eff;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: bold;
}

.location-marker {
  position: absolute;
  background: #409eff;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: all 0.2s;
}

.location-marker:hover {
  background: #66b1ff;
  transform: translate(-50%, -50%) scale(1.1);
}

.navigation-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 320px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 16px;
  z-index: 10;
}

.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.nav-header h4 {
  margin: 0;
}

.route-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 4px;
}

.turn-by-turn {
  margin-bottom: 16px;
  max-height: 200px;
  overflow-y: auto;
}

.step {
  display: flex;
  align-items: center;
  padding: 12px 8px;
  border-bottom: 1px solid #ebeef5;
}

.step:last-child {
  border-bottom: none;
}

.step.active {
  background: #ecf5ff;
}

.step-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 12px;
}

.location-list {
  width: 300px;
  border-left: 1px solid #ebeef5;
  padding: 16px;
}

.location-list h4 {
  margin-top: 0;
}

.location-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 8px;
}

.location-item:hover,
.location-item.active {
  background: #ecf5ff;
}

.location-icon {
  margin-right: 12px;
  color: #409eff;
}

.location-info {
  flex: 1;
}

.location-name {
  font-weight: 500;
  margin-bottom: 4px;
}

.location-floor {
  font-size: 12px;
  color: #909399;
}
</style>